<template>
    <div class="header">
        <div class="wrapper">
            <div class="logo">
                <img src="@/assets/logo.png" alt="">
                <div class="line"></div>
                <p>Online teaching platform</p>
            </div>
            <div class="nav" v-if="$route.path.toLowerCase() != '/forgetpassword'">
                <router-link to="/index">Homepage</router-link>
                <router-link to="/setting">Set</router-link>
                <a href="https://onlineclassproduct.oss-cn-beijing.aliyuncs.com/setup/ClongtutorSetup.exe">Client Download</a>
                <a href="" @click.prevent="logOut">Log out</a>
            </div>
            <div class="nav" v-else>
                <router-link to="/login">Back to login</router-link>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Header',
        methods: {
            logOut() {
                this.$confirm('Are you sure to quit?', 'Tips').then(() => {
                    localStorage.clear()
                    this.$router.push('/login')
                }).catch(() => {})
            }
        }
    }
</script>

<style scoped>
	.header {width: 100%; height: 100px; padding: 20px 0; background: #3E3A39; color: #fff;}
	.header .logo {font-size: 0; float: left;}
	.header .logo * {display: inline-block; vertical-align: bottom;}
	.header .line {width: 2px; height: 60px; background: #fff; margin: 0 26px;}
	.header .logo p {font-size: 24px; line-height: 30px;}
	.header .nav {float: right; margin-top: 10px;}
	.header .nav a {font-size: 18px; color: #fff; margin-left: 10px; padding: 0 20px; border-radius: 25px; height: 50px; line-height: 50px; float: left;}
	.header .nav a:hover {background: #4D84FC;}
	.header .nav a.router-link-active {background: #4D84FC;}
</style>